接續之前的選擇器相關語法，今天來學學 setAttribute。
一樣先寫個簡單的 HTML：
<body>
<h1 id="title">
<a herf="#">master title</a>
</h1>
<p id="slogan">這是標語</p>
</body>
然後一樣先用選擇器把 DOM 給選起來：
let masterTitle = document.querySelector('#title a');
let slogan = document.querySelector('#slogan');
假如我今天想要利用 JavaScript 來改變 <a> 的連結，想要將他指向菇狗時，可以這樣寫：
masterTitle.setAttribute('href','www.google.com');
//第一個參數是你要修改的屬性名稱，第二個是要改成的內容
第二種用法，我們可以利用 setAttribute 來新增標籤中原本沒有的屬性。
例如我在 slogon 上增加一個共用的顏色 class，
可以看到現在的 slogon 上的屬性只有名叫 slogon 的 id，我們可以這樣做：
先新增好共用的 CSS：
.mainColor: {
color: blue;
font-size: 50px;
};
接著跟前面一樣，使用 setAttribute 來新增標籤屬性:
slogon.setAttribute('class','mainColor');
//第一個參數是你要新增的屬性名稱，第二個是它的內容
//此時打開開發者工具就可以看到 slogon 變成這樣
<p id="slogan" class="mainColor">這是標語</p>
既然能增加，也就能它撈出來囉，有時會遇到需要撈出屬性內容的情況，這時候就派出 getAttribute 就對了！
我們一樣拿上面的例子來使用，假若我想撈出 masterTitle 的連結網址：
let masterTitle = document.querySelector('#title a').getAttribute('href');
// getAttribute 後面括弧填入你要抓取的屬性內容名稱
console log(masterTitle);
//會回傳字串 www.google.com
iThome鐵人賽
看影片追技術